<!DOCTYPE html >
<html>
<head>
    <title>Scatterplot Representation-Highcharts QBuilder</title>
    
    <script type="text/javascript" src="{{ MEDIA_URL }}qbuilder/jquery-1.6.2.min.js" ></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}qbuilder/Highcharts/highcharts.js" ></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}qbuilder/Highcharts/modules/exporting.js" ></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}qbuilder/Highcharts/themes/grid.js"></script>

    <script type="text/javascript">
var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container'
      },
      title: {
         text: 'Combination chart'
      },
      xAxis: {
         categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
      },
      tooltip: {
          formatter: function() {
            return ''+ this.series.name +': '+ this.y;
         },
      },
      series:
[
{
         type: 'column',
         name: 'Jane',
         data: [3, 2, 1, 3, 4]
},
{
         type: 'column',
         name: 'John',
         data: [2, 3, 5, 7, 6]
},
{
         type: 'column',
         name: 'Joe',
         data: [4, 3, 3, 9, 0]
},
{
         type: 'line',
         name: 'Average',
         data: [3, 2.67, 3, 6.33, 3.33]
},
]
   });
   
   
});
    </script>
</head>
<body>
    <div id="container" style="height:480px; margin: 0 2em; min-width: 620px">
</body>
</html>
